在導入TailWind Css之後，網頁的樣式被清除了，如h1
需要使用者重新定義標籤的樣式

編輯 app\page.jsx 檔案內容如下:

function HomePage() {
    return (
        <div>
            <h1 className="font-bold text-2xl pb-3">Indie Gamer</h1>
            <p>
                Only the best indie games, reviewed for you.
            </p>
        </div>
    )
}
export default HomePage

上面就是在h1的標籤中加入Tailwind CSS 重新定義樣式
完成後，應該就會想到那所有頁面裡的的<h1>都要去加 className那段樣式
沒錯~就是要一個一個加，但可以把這段樣式轉成組件(components)來取代<h1>

用組件(components)替代

編輯 components\Heading.jsx 檔案內容如下

function Heading({ children }) {
    return (
        <h1 className="font-bold text-2xl pb-3">{children}</h1>
    )
}

export default Heading

這邊會在專案的根目錄下建立 components 資料夾

用 Heading 組件 取代 其他頁面的<h1> 標籤

下面僅以stardew-vall\pagex.jsx 做示範，其他頁面只要有h1標籤一律用組件取代

import Heading from "../../../components/heading"

function StardewValleyPage() {
    return (
        <div>
            <Heading>Stardew Valley</Heading>
            <p>This will be the reviews for Stardew  Valley</p>
        </div>
    )
}
export default StardewValleyPage

引入別名Alias

編輯 jsconfig.json 檔案內容如下

{
    "compilerOptions":{
        "paths":{
            "@/*":["./*"]
        }
    }
}

以 app\reviews\stardew-valley\page.jsx 為範例

import Heading from "@/components/heading"

function HollowKnightPage() {
    return (
        <div>
            <Heading>Hollow Knight</Heading>
            <p>This will be the reviews for Hollow Knight</p>
        </div>
    )
}

export default HollowKnightPage

具體效果為:

引入別名前
import Heading from "../../../components/heading"

引入別名後
import Heading from "@/components/heading"

完成別名的設定後
在vs code 編輯新的import 會自動導入 @/檔案

大叔的鐵人賽第九天結束 :)